<div class="lv-date-picker-panel-container">
  <div class="lv-date-picker-panel-body">
    <ng-container *ngIf="!lvIsRange">
      <ng-container
        *ngTemplateOutlet="calendarTpl; context: { data: { value: date, activeDate: null, tag: '' } }"
      ></ng-container>
    </ng-container>
    <ng-container *ngIf="lvIsRange && !lvShowTime">
      <ng-container
        *ngTemplateOutlet="
          calendarTpl;
          context: {
            data: {
              value: selectedValue[0],
              activeDate: startActiveDate,
              tag: 'start',
              quickChangeMode: 'start'
            }
          }
        "
      ></ng-container>
      <ng-container
        *ngTemplateOutlet="
          calendarTpl;
          context: {
            data: {
              value: selectedValue[1],
              activeDate: endActiveDate,
              tag: 'end',
              quickChangeMode: 'end'
            }
          }
        "
      ></ng-container>
    </ng-container>
    <ng-container *ngIf="lvIsRange && lvShowTime">
      <ng-container
        *ngTemplateOutlet="
          calendarTpl;
          context: {
            data: {
              value: lvCurrentInput === 'start' ? selectedValue[0] : selectedValue[1],
              activeDate: lvCurrentInput === 'start' ? startActiveDate : endActiveDate,
              tag: lvCurrentInput
            }
          }
        "
      ></ng-container>
    </ng-container>
  </div>
  <div class="lv-date-picker-panel-footer" *ngIf="lvIsRange && (lvFooterExtra || (lvShowTime && lvOpenObserver))">
    <div class="lv-date-picker-panel-footer-extra" *ngIf="lvFooterExtra">
      <ng-container [ngTemplateOutlet]="lvFooterExtra"></ng-container>
    </div>
    <div
      class="lv-date-picker-panel-footer-content lv-date-picker-panel-footer-align-R"
      *ngIf="lvShowTime && lvOpenObserver"
    >
      <ng-container *ngIf="lvShowTime && lvOpenObserver">
        <button lv-button lvType="primary" lvSize="auto" [disabled]="okButtonStatus" (click)="onOk()">
          {{ i18n.get('ok') }}
        </button>
      </ng-container>
    </div>
  </div>
</div>
<div class="lv-date-picker-panel-presets" *ngIf="lvIsRange && lvPresetRanges">
  <ng-container *ngFor="let range of lvPresetRanges">
    <button
      lv-button
      lvType="link"
      class="lv-date-picker-panel-presets-item"
      [disabled]="getPresetButtonStatus(getObjectValue(range))"
      (click)="quickSelected(getObjectValue(range))"
      (mouseenter)="onQuickSelectedHover(getObjectValue(range))"
      (mouseleave)="onQuickSelectedLeave()"
    >
      {{ getObjectKey(range) }}
    </button>
  </ng-container>
</div>

<ng-template #calendarTpl let-dateValue="data">
  <lv-date-picker-calendar
    [lvDisabledDate]="lvDisabledDate"
    [lvShowTime]="lvPickerMode == 'date' ? lvShowTime : false"
    [lvShowTodayButton]="lvPickerMode == 'date' ? lvShowTodayButton : false"
    [lvShowNowButton]="lvPickerMode == 'date' ? lvShowNowButton : false"
    [lvNowAsBaseTime]="lvNowAsBaseTime"
    [lvPickerMode]="lvPickerMode"
    [lvCalendarCell]="lvCalendarCell"
    [lvCalendarYearCell]="lvCalendarYearCell"
    [lvCalendarMonthCell]="lvCalendarMonthCell"
    [lvOnlyShowActiveCell]="lvOnlyShowActiveCell"
    [lvPanelTitleReadonly]="lvPanelTitleReadonly"
    [lvCalendarYearOperate]="lvCalendarYearOperate"
    [lvCalendarMonthOperate]="lvCalendarMonthOperate"
    [lvFooterExtra]="lvFooterExtra"
    [lvOpenObserver]="lvOpenObserver"
    [lvIsRange]="lvIsRange"
    [lvTag]="dateValue.tag"
    [lvQuickChangeMode]="dateValue.quickChangeMode"
    [value]="dateValue.value"
    (valueChange)="valueChange($event)"
    [lvActiveDate]="dateValue.activeDate"
    (lvActiveDateChange)="activeDateChange($event)"
    [lvSelectedValue]="selectedValue"
    [lvHoverValue]="hoverValue"
    [lvCurrentInput]="lvCurrentInput"
    (lvCellMouseEnter)="cellMouseEnter($event)"
    (lvCellMouseLeave)="cellMouseLeave()"
  ></lv-date-picker-calendar>
</ng-template>
